<template>
  <div class="consumers-area-warp">
    <div class="consumers-area-title">
      <h3>消费者地区分布情况</h3>
      <a href="javascript:;" @click="toScanLog">更多 &gt</a>
    </div>
    <div id="consumersArea" style="width: 100%;height: 314px;">

    </div>
  </div>
</template>

<script>
  let echarts = require('echarts');
  let myChart;
  export default ({
    props: ['json'],
    data() {
      return {}
    },
    watch: {
      json(val) {
        this.drawChart(val);
      }
    },
    methods: {
      drawChart(val) {
        let option = {
          color: ['#7e8be2', '#72c14c', '#ffd263', '#f17970', '#409feb'],
          title: {
            text: '',
            subtext: '',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
          },
          series: [
            {
              name: '消费者地区分布情况',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: val.map(it => {
                return {name: it.cityName, value: it.count}
              }),
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        myChart = echarts.init(document.getElementById('consumersArea'));
        myChart.setOption(option);
      },
      toScanLog() {
        this.$router.push('/rep/scanLogReport');
      }
    }
  })
</script>

<style scoped>
  .consumers-area-warp {
    margin-top: 20px;
    width: 450px;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
  }

  .consumers-area-title {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #e8e8e8;
  }

  .consumers-area-title h3 {
    margin-left: 20px;
  }

  .consumers-area-title a {
    font-size: 12px;
    color: #0e83e6;
    margin-right: 20px;
  }
</style>
